<template>
  <p>name: {{ name }}</p>

  <button @click="updateName">update name</button>
</template>

<script>
import { reactive, toRef, ref } from 'vue';

export default {
  setup() {
    const data = reactive({
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })

    const name = toRef(data, 'name')
    // !ref 不关联
    // const name = ref(data.name)

    const updateName = () => {
      // name.value = '谈啸'
      data.name = '谈啸'
    }
    return { name, updateName } 
  }
}
</script>